<template>
    <div>
        <div>
            <label class="phone-label"><div class="repair0Image"></div> {{querytitle.title}}:<span class="query-value-label">{{querytitle.value}}</span></label>
        </div>
        <wp-null-data-area
            :null-data-msg="$st('wp_No_query_result')"
            v-if=" (!query_list_sate.listdata) || (query_list_sate.listdata.length === 0)" />
        <van-list
            v-model:loading="query_list_sate.loading"
            @load="loadMorePage"
            :finished="query_list_sate.loadfinish"
        >
            <maintenance-order-card
                v-for="(child,index) in query_list_sate.listdata"
                :key="index"
                :orderItem="child"
                :memberInfo="{}"/>
        </van-list>
    </div>
</template>
<script>
import MaintenanceOrderCard from '@/components/maintenance_control/MaintenanceOrder/MaintenanceOrderCard.vue';
import { useRepairOrderQueryListSetup } from '@/setup/repair/RepairReortQuerySetup';
import { computed } from 'vue';
import Cookies from 'js-cookie';
import { selfI18n } from '@/i18n';
export default {
    components: { MaintenanceOrderCard },
    setup () {
        const {
            loadMorePage,
            setQueryListState,
            query_list_sate
        } = useRepairOrderQueryListSetup();
        setQueryListState();

        const $st = selfI18n;
        const querytitle = computed(() => {
            const title_map = {
                phone: {
                    title: $st('wp_Mobile_Number_of_requester'),
                    value: query_list_sate.queryphone
                },
                userphone: {
                    title: $st('wp_Current_user'),
                    value: Cookies.get('username')
                },
                manufacturecode: {
                    title: $st('wp_Factory_Number'),
                    value: query_list_sate.querymanucode
                }
            };
            return title_map[query_list_sate.querytype] || {};
        });
        return {
            querytitle,
            loadMorePage,
            query_list_sate
        };
    }
};
</script>
<style scoped>
.repair0Image{
    height: 18px;
    width: 18px;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../../../assets/icon_18_phone.svg);
    margin-right: 8px;
}
.phone-label{
    padding: 0 15px;
    height: 26px;
    font-size: 14px;
    line-height: 25px;
    opacity: 1;
    display: flex;
    margin: 12px;
    background: rgba(24,144,255,0.05);
    border: 1px solid #1890ff;
    border-radius: 13px;
    align-items: center;
}
.query-value-label{
    padding: 0 10px;
    overflow: hidden;
}
.orderlist-container{
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}
:deep(.van-list__placeholder){
    height: 10px;
}
</style>
